<template>
    <div class="chat-input-container">
      <div class="input-area">
        <!-- 标签导航 -->
        <div class="input-tabs">
          <span class="tab-item active">创意写作</span>
          <span class="tab-item">阅读分析</span>
          <span class="tab-item">智慧绘图</span>
          <span class="tab-item">多语种翻译</span>
          <span class="tab-item">我的指令</span>
        </div>
        
        <!-- 输入框区域 -->
        <div class="input-wrapper">
          <el-input
            v-model="imInput"
            class="chat-input"
            placeholder="通过shift+回车换行；支持复制粘贴/拖拽上传图片、文档、音视频"
            :disabled="disabled"
            @keyup.enter.exact="handleSend"
            resize="none"
            :rows="2"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 6 }"
          />
        </div>
        
        <!-- 底部功能区 -->
        <div class="input-footer">
          <span class="model-info">深度思考(X1 Turbo)</span>
          <span class="search-link">联网搜索</span>
          <div class="action-icons">
            <el-icon><Picture/></el-icon>
            <el-icon><Document /></el-icon>
            <el-icon><VideoCamera /></el-icon>
            <el-icon><Microphone /></el-icon>
          </div>
          <el-button
            type="primary"
            class="send-button"
            :loading="sending"
            :disabled="!canSend"
            @click="handleSend"
            circle
          >
          <!-- <el-icon><Promotion /></el-icon> -->
            <el-icon v-if="!props.sending"><Promotion /></el-icon>
            <!-- <el-icon v-if="props.sending"><Loading /></el-icon> -->
          </el-button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false
    },
    sending: {
      type: Boolean,
      default: false
    }
  })
  
  const emit = defineEmits(['send'])
  
  const imInput = ref('')
  
  const canSend = computed(() => {
    return !props.disabled && !props.sending && imInput.value.trim().length > 0
  })
  
  const handleSend = () => {
    if (!canSend.value) return
    
    const message = imInput.value.trim()
    if (!message) return
    
    emit('send', message)
    imInput.value = ''
  }
  </script>
  
  <style scoped>
  .chat-input-container {
    padding: 12px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  
  .input-area {
    /* display: flex;
    flex-direction: column; */
    gap: 8px;
  }
  
  .input-tabs {
    display: flex;
    gap: 16px;
    margin-bottom: 8px;
  }
  
  .tab-item {
    font-size: 12px;
    color: #666;
    cursor: pointer;
    padding: 4px 0;
  }
  
  .tab-item.active {
    color: #409eff;
    position: relative;
  }
  
  .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #409eff;
  }
  
  .input-wrapper {
    width: 100%;
  }
  
  .chat-input {
    width: 100%;
  }
  
  .chat-input :deep(.el-textarea__inner) {
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 40px;
    border: 1px solid #dcdfe6;
  }
  
  .input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
  }
  
  .model-info {
    font-size: 12px;
    color: #909399;
    margin-right: 16px;
  }
  
  .search-link {
    font-size: 12px;
    color: #409eff;
    cursor: pointer;
    margin-right: 16px;
  }
  
  .action-icons {
    display: flex;
    gap: 12px;
    margin-right: 8px;
  }
  
  .action-icons .el-icon {
    font-size: 16px;
    color: #666;
    cursor: pointer;
  }
  
  .send-button {
    width: 32px;
    height: 32px;
    padding: 0;
  }
  
  .send-button .el-icon {
    font-size: 16px;
  }
  </style>